---
title: <media-duration-display>
description: Media Duration Display
layout: ../../../../layouts/ComponentLayout.astro
source: https://github.com/muxinc/media-chrome/tree/main/src/js/media-duration-display.js
---
import SandpackContainer from "../../../../components/SandpackContainer.astro";

The `<media-duration-display>` component keeps your viewers informed about the duration of the current media loaded in the player.

This component's primary use is intended to be display-only. Its time value will update automatically from any linked `media-controller` element.

## Default appearance

<SandpackContainer
  html={`<media-controller>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></video>
  <media-duration-display></media-duration-display>
</media-controller>`}
  hiddenCss={"div { font-size: 0; }"}
/>
